<template>
  <el-row class="header-wrap">
    <el-col class="header-left" :span="12">
      <!-- 侧栏伸缩 -->
      <div class="expand-sidemenu">
        <el-icon
          v-show="!appStore.sideOpenFlag"
          :size="20"
          color="#333"
          @click="changeExpand"
        >
          <Expand />
        </el-icon>
        <el-icon
          v-show="appStore.sideOpenFlag"
          :size="20"
          color="#333"
          @click="changeExpand"
        >
          <Fold />
        </el-icon>
      </div>
      <!-- 面包屑导航 -->
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item
          class="bread-item"
          v-for="item in matchedRoutes"
          :key="item.path"
          :to="{ path: item.path }"
        >
          <el-icon
            v-if="item.meta?.icon"
            class="bread-icon"
            :size="16"
            color="#333"
          >
            <component :is="item.meta?.icon"></component>
          </el-icon>
          <span>{{ item.meta.name }}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
    <el-col class="header-right" :span="12">
      <div class="global-actions">
        <el-button
          class="global-action-btn"
          icon="Refresh"
          @click="refreshFun"
        ></el-button>
        <el-button
          class="global-action-btn"
          icon="FullScreen"
          @click="screenFun"
        ></el-button>
        <el-button
          class="global-action-btn"
          icon="Setting"
          @click="settingFun"
        ></el-button>
      </div>
      <div class="user-wrap">
        <el-dropdown>
          <span class="el-dropdown-link">
            <el-avatar
              v-if="userStore.userInfo?.avatar"
              class="avatar"
              :src="userStore.userInfo?.avatar"
            />
            <el-avatar v-else class="avatar" :icon="UserFilled" />
            <span class="username">{{ userStore.userInfo?.username }}</span>
            <!-- <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon> -->
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="postLogoutFun">
                退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { ArrowRight, UserFilled } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import useUserStore from '@/store/modules/user'
import useAppStore from '@/store/modules/app'
import { enterFullScreen, exitFullscreen } from '@/utils'
const route = useRoute()
const router = useRouter()
const userStore = useUserStore()
// 面包屑导航路由记录
const matchedRoutes = computed(() => {
  return route.matched
})
// 侧栏伸缩
const appStore = useAppStore()
const changeExpand = () => {
  appStore.sideOpenFlag = !appStore.sideOpenFlag
}
// 退出登录
const postLogoutFun = () => {
  userStore.postLogoutAction()
  router.push({ path: '/login', query: { redirect: route.path } })
}
// 刷新路由
const refreshFun = () => {
  appStore.setRefreshFlag(false)
  console.log('refreshFlag', appStore.refreshFlag)

  nextTick(() => {
    appStore.setRefreshFlag(true)
  })
}
// 全屏
const fullScreenFlag = ref(false)
const screenFun = () => {
  fullScreenFlag.value = !fullScreenFlag.value
  if (fullScreenFlag.value) {
    enterFullScreen()
  } else {
    exitFullscreen()
  }
}
// 设置
const settingFun = () => {}
</script>

<style scoped lang="scss">
$headerBtnWidth: 26px;

.header-wrap {
  height: $layout_tabbar_height;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.expand-sidemenu {
  margin-right: 15px;
  cursor: pointer;
}

.bread-item {
  display: flex;
  align-items: center;
  cursor: pointer;

  .bread-icon {
    margin-right: 3px;
  }
}

:deep(.el-breadcrumb__inner) {
  display: flex;
  align-items: center;
}

.global-actions {
  :deep(.el-button + .el-button) {
    margin-left: 8px;
  }
}

.global-action-btn {
  box-sizing: border-box;
  width: $headerBtnWidth;
  height: $headerBtnWidth;
  padding: 0;
  border-radius: 50%;
}

.user-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 10px;

  .username {
    max-width: 200px;
    margin-left: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .avatar {
    width: $headerBtnWidth;
    height: $headerBtnWidth;
  }

  :deep(.el-tooltip__trigger) {
    display: flex;
    align-items: center;
    cursor: pointer;
  }
}
</style>
